<template>
  <el-dialog
    :visible.sync="visible"
    width="420px"
    title="选择对比方案"
    :before-close="handle_close"
    append-to-body
  >
    <el-form :model="form" label-width="60px" size="small">
      <el-form-item label="区域:">
        <span>{{ form.areaName }}</span>
      </el-form-item>
      <el-form-item label="年度:" prop="year">
        <span>{{ form.year }}</span>
      </el-form-item>
    </el-form>
    <div class="programme-list">
      <!-- <div>
        <el-button type="text" @click="handle_checkAll">全选</el-button>
        <el-button type="text" @click="checkedList = []">不选</el-button>
      </div> -->
      <el-checkbox-group v-model="checkedList" :max="3" :loading="loading">
        <el-checkbox v-for="item in programmeList" :key="item.value" :label="item.value">{{item.label}}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button @click="handle_close" size="small">取消</el-button>
      <el-button class="test111" type="primary" @click="handle_submit" size="small" :disabled="checkedList.length === 0">对比</el-button>
    </div>

    <ProgrammeCompare ref="programmeCompare"></ProgrammeCompare>

  </el-dialog>
</template>
<script>
import { $budgetAPI } from "@/api";
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
export default {
  components: {
    ProgrammeCompare: () => import("./programmeCompare")
  },
  data(){
    return {
      visible: false,
      loading: false,
      form: {
        year: "2023",
        areaName: ''
      },
      programmeList: [],
      checkedList: []
    }
  },
  created(){
    let accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    this.form.areaName = accountInfo.areaName;
    // this.init("2023");
  },
  mounted(){
    // setTimeout(() => {
      // document.querySelector(".test111").click();
    // },1000)
  },
  methods: {
    init(year){
      this.visible = true;
      this.form.year = year;
      this.getData();
    },
    getData(){
      this.loading = true;
      $budgetAPI.claimQueryPlan({
        year: this.form.year,
        token: getCookie("token")
      },
      res =>{
        this.alertError(res);
        this.loading = false;
        this.programmeList = res.content.map(it => {
          return {
            label: it.logName,
            value: it.logId
          }
        })
      },
      err => {
        this.alertError(err);
        this.loading = false;
      })
    },
    handle_close(){
      this.visible = false;
    },
    handle_submit(){
      let list = this.checkedList.map(it => {
        let label = this.programmeList.find(item => item.value === it).label;
        return {
          value: it,
          label
        }
      })
      this.$refs.programmeCompare.init(list);
    },
  }
}
</script>
<style lang="scss" scoped>
.programme-list {
  width: 96%;
  height: 260px;
  overflow: auto;
  margin: 0 auto;
  border: 1px solid rgb(207, 207, 207);
  border-radius: 3px;
  padding: 15px 0 0 15px;
  /deep/ .el-checkbox {
    width: 100%;
    display: block;
    margin-bottom: 10px;
  }
}
</style>